<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>

    </h:head>
    <h:body>


        <ui:composition template="/template/common/homeLayout.xhtml">



            <ui:define name="leftBar">

                <h:form id="calendarsForm"> 
                    <p:selectManyCheckbox id="calendarLeftBoxGrid" value="#{scheduleBean.chosenCalendars}" layout="grid" columns="1"  >
                        <f:selectItems  value="#{scheduleBean.userCalendars}" var="cal" itemLabelEscaped="false" itemLabel="#{scheduleBean.getLinkForCalendar(cal)} #{scheduleBean.getColorBoxForCalendar(cal)}" itemValue="#{cal.id}" />
                    </p:selectManyCheckbox> 
                    <p:commandButton update=":schedule @form" value="Update" action="#{scheduleBean.updateScheduleModel()}"/>    
                    <h:link value="Add Calendar" outcome="calendar.xhtml?id=new" />    

                </h:form>    


            </ui:define>
            <ui:define name="content">
                <h:form>
                    <p:remoteCommand update=":schedule :calendarsForm" name="rc" autoRun="true" actionListener="#{scheduleBean.updateScheduleModel()}" />
                </h:form>
                <h:form id='schedule'>
                    <p:commandButton value="#{scheduleBean.scheduleDisplay?'Agenda':'Schedule'}" styleClass="agendaButton" update="@this @form" action="#{scheduleBean.switchView()}" />

                <p:schedule id="scheduleView" value="#{scheduleBean.model}" aspectRatio="2" styleClass="scheduleHome"  
                            ignoreTimezone="false" timeFormat="HH:mm{ - HH:mm}" widgetVar="myschedule"
                            rendered='#{scheduleBean.scheduleDisplay}'>
                    <p:ajax event="dateSelect" listener="#{scheduleBean.onDateSelect}"
                            update=":eventDetails" oncomplete="PF('eventDialog').show();" />
                    <p:ajax event="eventSelect" listener="#{scheduleBean.onEventSelect}"
                            update=":eventDetails" oncomplete="PF('eventDialog').show();" />
                </p:schedule>
                
                    <p:dataList value="#{scheduleBean.nextEvents}" rendered="#{!scheduleBean.scheduleDisplay}" var="e">
                          #{e.date} - #{e.endDate}  <h:link value="#{e.title}" outcome="/user/event.xhtml" ><f:param name="id" value="#{e.id}"/> </h:link>
                    </p:dataList>    
                    
                </h:form>

                <p:dialog widgetVar="eventDialog" header="Event Details" resizable="false" style="height:50% !important; height:40% !important; top:25% !important; left: 30% !important;">
                    <h:form id="eventDetails" >
                        <h:panelGrid columns="2">
                            <h:outputLabel for="title" value="Title:" />
                            <p:inputText id="title" value="#{scheduleBean.event.title}" disabled="#{!scheduleBean.modifiableEvent}" required="true"/>
                            <h:outputLabel for="startdatetime" value="From:" />
                            <p:calendar id="startdatetime" value="#{scheduleBean.event.startDate}" mindate="#{scheduleBean.today()}" disabled="#{!scheduleBean.modifiableEvent}" pattern="MM/dd/yyyy HH:mm:ss" />

                            <h:outputLabel for="enddatetime" value="To:" />
                            <p:calendar id="enddatetime" value="#{scheduleBean.event.endDate}" mindate="#{scheduleBean.today()}" disabled="#{!scheduleBean.modifiableEvent}" pattern="MM/dd/yyyy HH:mm:ss" />

                            <h:outputLabel for="CalendarForEvent" value="Calendar:" />
                            <p:selectOneMenu id="CalendarForEvent"  value="#{scheduleBean.event.calendar}" disabled="#{!scheduleBean.modifiableEvent}" required="true" converter="CalendarConverter" >
                                <f:selectItem itemLabel="Select Calendar"  noSelectionOption="true"  />
                                <f:selectItems value="#{scheduleBean.userCalendars}" var="cal" itemValue="#{cal}"  itemLabel="#{cal.title}" />
                            </p:selectOneMenu>


                            <h:outputLabel for="TypeForEvent" value="EventType:" />
                            <p:outputPanel>
                                <p:selectOneMenu id="TypeForEvent" value="#{scheduleBean.event.type}" disabled="#{!scheduleBean.modifiableEvent}" required="true" converter="EventTypeConverter" >
                                    <f:selectItem itemLabel="Select Type"  noSelectionOption="true" />
                                    <f:selectItems value="#{scheduleBean.userTypes}" var="type" itemValue="#{type}" itemLabel="#{type.title}" />
                                    <p:ajax process="@this" update="eventTypeLink"/>
                                </p:selectOneMenu>
                                <h:link id='eventTypeLink' outcome="/user/eventType.xhtml" rendered="#{scheduleBean.event.type!=null}" style="margin-left: 10px;" value="View Event Type">
                                    <f:param name="id" value="#{scheduleBean.event.type==null?0:scheduleBean.event.type.id}"/>
                                </h:link>                         
                            </p:outputPanel>    

                            <h:outputLabel for="VisForEvent" value="EventType:" />
                            <p:selectOneMenu id="VisForEvent" required="true" disabled="#{!scheduleBean.modifiableEvent}" value="#{scheduleBean.event.visibility}" >
                                <f:selectItems value="#{scheduleBean.visibilities}" var="vis" itemValue="#{vis}" itemLabel="#{vis}" />
                            </p:selectOneMenu>

                            <h:outputLabel for="addressForEvent" value="Location:" />

                            <p:inputText id="addressForEvent" value="#{scheduleBean.geoLoc}" onblur="codeAddress()" disabled="#{!scheduleBean.modifiableEvent}" onkeyup="codeAddress()" >
                                <f:validateLength minimum="1"/>
                            </p:inputText>


                            <h:link outcome="/user/event.xhtml" rendered="#{scheduleBean.event.dbId!=0}" value="Go to Event Page">
                                <f:param name="id" value="#{scheduleBean.event.dbId!=0?scheduleBean.event.dbId:0}"/>
                            </h:link>
                            <h:commandLink  value="Remove Event" action="#{scheduleBean.removeEvent()}" rendered="#{scheduleBean.event.dbId!=0}"/>
                            <p:commandButton type="reset" value="Reset" />
                            <p:commandButton value="Save" actionListener="#{scheduleBean.addEvent}" onstart="codeAddress()" onclick="jQuery(this).addClass('ui-state-disabled')"  
                                             oncomplete=" if (args &amp;&amp; !args.validationFailed){PF('myschedule').update();PF('eventDialog').hide();}else{updateDialog();} jQuery(this).removeClass('ui-state-disabled'); " />
                            
                        </h:panelGrid>
                        <p:remoteCommand name="updateDialog" process="@this" update="@form" />
                    </h:form>
                </p:dialog>
                
                <h:form>
                    <p:remoteCommand update="" name="gc" process="@this @form" autoRun="false"  actionListener="#{scheduleBean.onGeolocation()}" />

                </h:form>

            </ui:define>

        </ui:composition>

    </h:body> 
</html>

